import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
import {Flex} from "antd-mobile";
import {UserCenterStore} from "../store";
import constant from "../../../util/common/constant";

interface IUserInfoProps {
  userCenterStore?: UserCenterStore | any;
}

@inject('userCenterStore')
@observer
export default class BasicInfo extends Component<IUserInfoProps, any> {

  render() {
    const {
      userPhoto,
      userNickName,
      userPhone,
    } = this.props.userCenterStore.userInfo;
    return (
      <Flex className="user-header-info">
        <Flex className="user-photo" justify="center" align="center">
          {
            userPhoto ?
              <img src={constant.IMG_HOST + userPhoto} alt="userPhoto" width="100%" height="100%"/> :
              <i className="dishfont">&#xe8c9;</i>
          }
        </Flex>
        <Flex className="user-brief" direction="column" justify="between" align="start">
          <p>{userNickName}</p>
          <p>{userPhone}</p>
        </Flex>
      </Flex>
    );
  }

}
